<template>
  <div class="game-nav">
    <div class="btn" @click="state.expand = !state.expand">
      <div class="arrow" :class="{ rotate: !state.expand }">
        <svg-icon name="r-arrow" color="#fff" class="w-[20px] h-[20px]" />
      </div>
    </div>
    <transition name="fade">
      <div v-if="state.expand">
        <div v-for="item in state.bars" class="btn relative" @click="handleGameBtnItem(item)">
          <svg-icon :name="item.icon" color="#fff" class="w-[20px] h-[20px]" />
          <span
            v-if="serviceCount > 0 && item.key == 'chat'"
            class="rounded-[20px] absolute flex justify-center items-center bg-red-500 w-[20px] h-[20px] text-[#fff] top-[-5px] right-[0px]"
            >{{ serviceCount > 99 ? 99 : serviceCount }}</span
          >
        </div>
      </div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { useServiceStore } from "@/store/modules/service";
import { storeToRefs } from "pinia";
import { GameBtnType } from "@/enums";
import { usePremsStore } from "@/store/modules/prems";

type BarItem = {
  type: GameBtnType;
  key: string;
  link?: string;
  icon: string;
};

const serviceStore = useServiceStore();
const roomState = inject<RoomState>("roomState") as RoomState;
const { serviceCount } = storeToRefs(serviceStore);
const router = useRouter();

const premsStore = usePremsStore();
const state = reactive({
  expand: true,
  bars: <BarItem[]>[
    { type: GameBtnType.button, key: "switch", icon: "r-game" },
    ...(premsStore.isEditChatSetting
      ? [{ type: GameBtnType.link, key: "chat", link: "/admin/main/chat", icon: "r-kefu" }]
      : []),
    { type: GameBtnType.button, key: "rule", icon: "r-rule" }
  ]
});

// 点击item
const handleGameBtnItem = (item: BarItem) => {
  if (item.type == GameBtnType.button) {
    // 显示游戏切换
    if (item.key == "switch") {
      roomState.switchGameOpen = !roomState.switchGameOpen;
    }
    if (item.key == "rule") {
      // 显示规则
      roomState.ruleOpen = true;
    }
  } else if (item.type == GameBtnType.link) {
    router.push(item.link as string);
  }
};

watch(
  () => roomState.moreOpen,
  val => {
    if (val) {
      state.expand = false;
    }
  }
);

onMounted(() => {});
</script>
<style lang="scss" scoped>
.arrow {
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow.rotate {
  transform: rotate(180deg);
}
.game-nav {
  position: absolute;
  top: 150px;
  right: 0;
  z-index: 1;
}
.shake {
  animation: shake 1.5s infinite alternate; /* 使用动画名称、持续时间、重复次数和动画方向 */
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(-3px);
  }
  30%,
  50%,
  70% {
    transform: translateX(3px);
  }
}
</style>
<style scoped>
.btn {
  @apply w-[38px] h-[38px] bg-[var(--primary)] rounded-[38px] shadow-md mb-[10px] mr-[4px];
  @apply flex justify-center items-center;
}
</style>
